<template>
    <div class="admin-dashboard">
        <!-- 顶部导航栏 -->
        <header class="navbar">
            <div class="logo">
                <span>泛雅</span>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 课程信息卡片 -->
            <section class="course-card">
                <div class="course-info">
                    <div class="course-image">
                        <img src="https://picsum.photos/id/101/300/150" alt="课程封面" class="course-cover">
                    </div>
                    <div class="course-details">
                        <h2 class="course-title">Web前端框架技术（讯...）</h2>
                        <p class="course-teacher">任课教师：邢亚飞（科大讯飞）</p>
                        <div class="course-metrics">
                            <div class="metric-item">
                                <span class="metric-label">课程数</span>
                                <span class="metric-value">5个</span>
                            </div>
                            <div class="metric-item">
                                <span class="metric-label">选课学生数</span>
                                <span class="metric-value">192人</span>
                            </div>
                            <div class="metric-item">
                                <span class="metric-label">课程访问数</span>
                                <span class="metric-value">12,436次</span>
                            </div>
                            <div class="metric-item">
                                <span class="metric-label">课程访问量</span>
                                <span class="metric-value">91,540次</span>
                            </div>
                        </div>
                        <div class="course-actions">
                            <button class="btn btn-primary">课程门户</button>
                            <button class="btn btn-secondary">详情门户</button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 导航标签页 -->
            <section class="tab-navigation">
                <nav class="tabs">
                    <button class="tab-btn active">基础数据</button>
                    <button class="tab-btn">课堂报告</button>
                    <button class="tab-btn">学情统计</button>
                    <button class="tab-btn">学生成绩</button>
                    <button class="tab-btn">学习监控</button>
                </nav>
            </section>

            <!-- 数据概览区域 -->
            <section class="overview-section">
                <!-- 学情概览 -->
                <div class="overview-card">
                    <h3 class="section-title">学情概览</h3>
                    <div class="metrics-grid">
                        <div class="metric-card">
                            <span class="metric-card-label">近一个月活跃学生数</span>
                            <span class="metric-card-value">191人</span>
                        </div>
                        <div class="metric-card">
                            <span class="metric-card-label">近一个月师生活动数</span>
                            <span class="metric-card-value">6,545次</span>
                        </div>
                        <div class="metric-card">
                            <span class="metric-card-label">近一个月活跃班级数</span>
                            <span class="metric-card-value">4个</span>
                        </div>
                    </div>
                </div>

                <!-- 课程资源建设概览 -->
                <div class="overview-card">
                    <div class="section-header">
                        <h3 class="section-title">课程资源建设概览</h3>
                        <a href="#" class="view-details">详情 ></a>
                    </div>
                    <div class="metrics-grid">
                        <div class="metric-card">
                            <span class="metric-card-label">章节资源数</span>
                            <span class="metric-card-value">168个</span>
                        </div>
                        <div class="metric-card">
                            <span class="metric-card-label">资料资源数</span>
                            <span class="metric-card-value">4个</span>
                        </div>
                        <div class="metric-card">
                            <span class="metric-card-label">题库题目总数</span>
                            <span class="metric-card-value">489个</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 图表区域 -->
            <section class="charts-section">
                <!-- 学习热力图 -->
                <div class="chart-card">
                    <h3 class="section-title">近7日学生在线学习热力图</h3>
                    <div class="heatmap-container">
                        <div class="heatmap">
                            <!-- 热力图时间轴 -->
                            <div class="heatmap-time">
                                <div class="time-label">08:00</div>
                                <div class="time-label">12:00</div>
                                <div class="time-label">16:00</div>
                                <div class="time-label">20:00</div>
                                <div class="time-label">24:00</div>
                            </div>
                            
                            <!-- 热力图网格 -->
                            <div class="heatmap-grid">
                                <div class="heatmap-row" v-for="i in 7" :key="i">
                                    <div class="heatmap-cell" v-for="j in 16" :key="j" :class="getHeatmapClass(i, j)"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 资源分布统计 -->
                <div class="chart-card">
                    <h3 class="section-title">资源分布统计</h3>
                    <div class="distribution-tabs">
                        <button class="distribution-tab active">章节资源分布</button>
                        <button class="distribution-tab">资料资源分布</button>
                        <button class="distribution-tab">题库题型分布</button>
                    </div>
                    <div class="distribution-chart">
                        <div class="distribution-bars">
                            <div class="distribution-bar" style="width: 60%; background-color: #4CAF50;"></div>
                            <div class="distribution-bar" style="width: 30%; background-color: #2196F3;"></div>
                            <div class="distribution-bar" style="width: 10%; background-color: #FF9800;"></div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
</template>

<script>
export default {
    name: 'HomeView',
    data() {
        return {
            // 模拟热力图数据
            heatmapData: [
                // 第一行
                [0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 2, 1, 0, 0, 0],
                // 第二行
                [0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 4, 3, 2, 1, 0],
                // 第三行
                [0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 6, 5, 4, 3, 2],
                // 第四行
                [0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 8, 7, 6, 5, 4],
                // 第五行
                [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5],
                // 第六行
                [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9, 8, 7, 6, 5, 4],
                // 第七行
                [0, 1, 2, 3, 4, 5, 6, 7, 8, 7, 6, 5, 4, 3, 2, 1]
            ]
        }
    },
    methods: {
        // 获取热力图单元格的类名
        getHeatmapClass(row, col) {
            const value = this.heatmapData[row - 1][col - 1];
            if (value === 0) return 'heatmap-cell-empty';
            if (value <= 2) return 'heatmap-cell-low';
            if (value <= 5) return 'heatmap-cell-medium';
            if (value <= 8) return 'heatmap-cell-high';
            return 'heatmap-cell-very-high';
        }
    }
}
</script>

<style scoped>
/* 全局样式重置和基础设置 */
.admin-dashboard {
    width: 100%;
    min-height: 100vh;
    background-color: #f5f7fa;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #333;
}

/* 顶部导航栏 */
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1890ff;
}

/* 主要内容区域 */
.main-content {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* 课程信息卡片 */
.course-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.course-info {
    display: flex;
    padding: 1.5rem;
    gap: 1.5rem;
}

.course-image {
    flex-shrink: 0;
}

.course-cover {
    width: 200px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

.course-details {
    flex: 1;
}

.course-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.course-teacher {
    color: #666;
    margin-bottom: 1rem;
}

.course-metrics {
    display: flex;
    gap: 2rem;
    margin-bottom: 1rem;
}

.metric-item {
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-size: 0.875rem;
    color: #999;
    margin-bottom: 0.25rem;
}

.metric-value {
    font-size: 1.125rem;
    font-weight: bold;
    color: #333;
}

.course-actions {
    display: flex;
    gap: 1rem;
}

.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #1890ff;
    color: white;
}

.btn-primary:hover {
    background-color: #40a9ff;
}

.btn-secondary {
    background-color: #f0f0f0;
    color: #333;
}

.btn-secondary:hover {
    background-color: #e0e0e0;
}

/* 标签页导航 */
.tab-navigation {
    margin-bottom: 2rem;
}

.tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    gap: 0.5rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.875rem;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn:hover {
    color: #1890ff;
}

.tab-btn.active {
    color: #1890ff;
    border-bottom-color: #1890ff;
    font-weight: 500;
}

/* 数据概览区域 */
.overview-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.overview-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 1rem;
}

.view-details {
    font-size: 0.875rem;
    color: #1890ff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.view-details:hover {
    color: #40a9ff;
    text-decoration: underline;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.metric-card {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.2s ease;
}

.metric-card:hover {
    transform: scale(1.05);
    background-color: #e3f2fd;
}

.metric-card-label {
    display: block;
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 0.5rem;
}

.metric-card-value {
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

/* 图表区域 */
.charts-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.chart-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chart-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 热力图样式 */
.heatmap-container {
    margin-top: 1rem;
}

.heatmap {
    display: flex;
    gap: 1rem;
}

.heatmap-time {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.time-label {
    font-size: 0.75rem;
    color: #999;
    text-align: right;
}

.heatmap-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.heatmap-row {
    display: flex;
    gap: 2px;
}

.heatmap-cell {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    transition: transform 0.2s ease;
}

.heatmap-cell:hover {
    transform: scale(1.2);
}

.heatmap-cell-empty {
    background-color: #f0f0f0;
}

.heatmap-cell-low {
    background-color: #e6f7ff;
}

.heatmap-cell-medium {
    background-color: #91d5ff;
}

.heatmap-cell-high {
    background-color: #1890ff;
}

.heatmap-cell-very-high {
    background-color: #096dd9;
}

/* 资源分布统计样式 */
.distribution-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.distribution-tab {
    padding: 0.5rem 1rem;
    background: none;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

.distribution-tab:hover {
    background-color: #f0f0f0;
}

.distribution-tab.active {
    background-color: #e6f7ff;
    color: #1890ff;
    font-weight: 500;
}

.distribution-chart {
    height: 200px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    padding: 1rem 0;
}

.distribution-bars {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    width: 100%;
    height: 100%;
}

.distribution-bar {
    height: 80%;
    border-radius: 4px 4px 0 0;
    transition: transform 0.3s ease;
}

.distribution-bar:hover {
    transform: scale(1.05);
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .overview-section,
    .charts-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }
    
    .course-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .course-metrics {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .heatmap {
        flex-direction: column;
        align-items: center;
    }
    
    .heatmap-time {
        flex-direction: row;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .heatmap-grid {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 1rem;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .course-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 200px;
    }
}
</style>
